<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
	<meta http-equiv="content-type" content="text/xml; charset=utf-8" /> 
    <title>Registration</title>
    <meta name="description" content="Green Travel Registration" /> 
	<meta name="keywords" content="green travel, registration, register, member, sign up" /> 
	<link rel="stylesheet" type="text/css" href="formatstyles.css"/> 
	<link rel="stylesheet" type="text/css" href="divstyles.css"/> 
    <link rel="stylesheet" type="text/css" href="style/css/jquery-ui-1.8.18.custom.css" />
	
	<!-- include CSS always before including js -->

	<!-- include jQuery library -->
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
	<script type="text/javascript" src="js/login.js"></script>
	<script type="text/javascript" src="js/register.js"></script>
	<link rel="stylesheet" type="text/css" media="screen" href="style/css/demos.css"/>
	<style type="text/css" media="screen"> 
		@import "style/css/uni-form.css"; 
	</style>
	
	<!-- Demo page js -->
	<script type="text/javascript" src="js/jquery.uni-form.js"></script>
	
	<!-- Star Rating widget stuff here... -->
	<script type="text/javascript" src="js/jquery.ui.stars.js"></script>
	<link rel="stylesheet" type="text/css" href="style/css/crystal-stars.css"/>
	<script type="text/javascript" src ="js/language-en.js"></script> 
	<script type="text/javascript" src ="js/nopcart.js" language="javascript"> 
	
      //============================================================== 
      //               NOP Design JavaScript Shopping Cart               
      //-------------------------------------------------------------- 
	  //       Visit NOP Design at http://www.nopdesign.com/freecart     
	  //============================================================== 
	</script> 
	
</head>

<body>
<div id="fade" style="display:none;"></div>
	<!-- This is the page section -->
	<div id="page_section">

		<!-- This is the banner --> 
		<div id="banner"> 
 			<?php include("banner.php"); ?>
		</div> 
		<!-- This is end of the banner --> 
    
    	<div id="user-cpanel">
		<?php include("user_cpanel.php"); ?>
		<?php 
				if (isset($_SESSION['login']) && ($_SESSION['login'])) {
					header('Location: index.html');
				}		
 ?>
        </div>
        <div class="wan-clear"></div>
        <div id="user-form">
       	<?php include("user-form.php"); ?>
		</div>
		<div id="topnav">
           <?php include("top-nav.php"); ?>
        </div>
        
<!-- This is the content -->
		<div id="content">
		<h1>You have made a wise decision to join us!</h1>
			<form action="registration.php" method="post" id="registration">
            <h1>Registration Form</h1>
				<fieldset>
					<table>
						<tr>
							<td width="500px">Username<br /> 
								<input type="text" value="" name="username" id="username"   onchange="checkUser();" autocomplete="off"
                                placeholder="Account username"/>
								<span id="username" style="display:none; color: #FF4040;"></span>
							</td>
						</tr>

						<tr>
							<td>Password<br />
							<input type="password" name="password"  id="password" onchange="checkPw();" placeholder="Account password"/>
							<span id="password" style="display:none; color: #FF4040;"></span></td>
						</tr>
                        
                        <tr>
                        	<td>Retype your password<br />
                        	<input type="password" name="retypepassword"  id="retypepassword"  onchange="checkRePw();" 
                            placeholder="Re-enter password"/>
							<span id="retypepassword" style="display:none; color: #FF4040;"></span></td>
                        </tr>
                        
						<tr>
                        	<td>Email<br/>
                        	<input type="text" name="email" id="email"  onchange="isEmail();" placeholder="Email address" />
							<span id="email" style="display:none; color: #FF4040;"></span>
							</td>
						</tr>
					
						<tr>
							<td>First Name<br /> <input type="text" name="firstname" onchange="isEmpty('firstname');"
								 placeholder="First name"  id="firstname"/>
								 <span id="firstname" style="display:none; color: #FF4040;"></span></td>
							</td>
						</tr>
                        
                        <tr>
							<td>Last Name<br /> <input type="text" name="lastname" id="lastname" onchange="isEmpty('lastname');"
								 placeholder="Last name" />
								 <span id="lastname" style="display:none; color: #FF4040;"></span></td>
							</td>
						</tr>

						<tr>
							<td>Date of Birth<br /> <input id="dob" name="dob" size="25" type="text" 
                            style="position: relative; z-index: 99999" onchange="validdate();" placeholder="Select a date">
							 <span id="dob" style="display:none; color: #FF4040;"></span></td>
						</tr>

						<tr>
							<td>Street<br /> <input type="text" name="street" id="street" onchange="isEmpty('street');" 
                            placeholder="Street name"/>
							<span id="street" style="display:none; color: #FF4040;"></span></td>
						</tr>

						<tr>
							<td>City<br /> <input type="text" name="city" id="city" onchange="isEmpty('city');" placeholder="City name"/>
							<span id="city" style="display:none; color: #FF4040;"></span></td>
						</tr>
						
						<tr>
							<td>Nationality<br /> 
								<?php include("countries.php"); ?> 
						</tr>
					</table>
					<div id="summary_error"></div>
				</fieldset>
                <br />
				<center>
            	<button id="registerNew" name="button"  type="button" value="Register" onclick="submitForm();">Register</button></center>
			</form>
		</div>
		<div class="wan-clear"></div> 
<!-- This is end of the content -->
	</div> 
<!-- This is end of the page section -->
<br />
<!-- This is the footer -->
		<div id="footer"> 
			<p class="footer">This website is a student project that is intended to be used only for academic purposes. This page was created by Long, Tran Hoang </p>
		</div> 
<!-- This is end of the footer -->
</body>

</html>